﻿(function($){
  var PageWidgets = Backbone.View.extend({
    el: $('body'), 
	events: {
      'click button#add': 'addTxtWidget'
    },
	
    initialize: function(){
      _.bindAll(this, 'render', 'addTxtWidget'); 

      this.counter = 0; 
      this.render();
    },
    
    render: function(){
      $(this.el).append("<button id='add'>Text Widget</button>");
      $(this.el).append('<div id="wrapper"><div id="content" class="container_12"><div class="grid_12" id="pageArea"></div><div class="clear"></div></div></div>');
    },
    
    addTxtWidget: function(){
      this.counter++;
      $('div #pageArea', this.el).append('<div class="txtWidget" id="tb' +this.counter+ '"><textarea>' + 'id=' +this.counter+ '</textarea></div>');
	  $('div #tb' +this.counter, this.el).draggable({ grid: [ 25,25 ] });
	  $('div #tb' +this.counter, this.el).resizable({grid: 25});
    }
  });

  var pageWidgets = new PageWidgets();
  
})(jQuery);